{% extends "layout.html" %}
{% block title %}注册{% endblock %}
{% block head %}
{% endblock %}
{% block main_content %}
<div id="body">
  <div class="wrap">
    <div class="primary">
      <div class="sect">
        <h2>注册账号</h2>
        <div class="sectContent">
          <div class="gForm">
            <div class="row">
              <label for="username">常用邮箱：</label>
              <input name="username" type="text" class="inputbox shortinput" id="username" onblur="nameExist();" />
                <span id="id_info" class="hint">请填写真实邮箱，将用于登录网站，找回密码等。</span> 
              </div>
            <div class="row">
              <label for="password">设置你的密码：</label>
              <input type="password" class="inputbox shortinput" id="pass" />
              <span id="pass_info" class="hint">建议4个字符以上。</span> 
              <input name="password" type="hidden" id="password" />
            </div>
            <div class="row">
              <label for="nickname">起一个昵称：</label>
              <input type="text" class="inputbox shortinput" id="nickname" name="nickname" onblur="nickExist();" maxlength="12" />
                <span id="nick_info" class="hint"></span> 
              </div>
            <div class="row">
              <label>&nbsp;</label>
              <div class="col">
                <input name="chk_lic" type="checkbox" id="chk_lic" class="chkSpec" checked="checked" />
                <label for="chk_lic" class="inline">已阅读并接受&nbsp;<a target="_blank" href="/reg/lic/">使用协议</a></label>
                <p id="lic_info" class="alert"></p>
              </div>
            </div>
            <div class="sectBtn">
              <input type="button" name="regbutton" id="regbutton" class="buttonLarge" value="立即注册" onclick="register();"  />
              	我已有账号，去<a href="/login/">登录</a>
              <p id="err_txt" class="alert">{{ errors.get('reg', '') }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="secondary secSpec">
      <div class="sect">
        <h2>加入我们...</h2>
        <div class="sectContent">
          <div class="textBox">
            <p>欢迎！ </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block popup_content %}
<script type="text/javascript">
    function checkRegName(){
        var input = $("username").value; var info = $("id_info"); info.className = "tips"; info.innerHTML = "检测用户名 ...";
        if (input.length == 0) { info.innerHTML = "您还没有输入邮箱地址！"; info.className = "alert"; return false; }
        if (!$chkType(input,'email')) { info.innerHTML = "您输入的邮箱地址格式不正确！"; info.className = "alert"; return false; }
        return true;
    }
    function nameExist(){
        var input = $("username").value; var info = $("id_info"); info.className = "tips"; info.innerHTML = "检测用户名 ...";
        if (!checkRegName()) return false;
        new echoAjax({url:'/reg/utils/',params: "type=accexist&value=" + String.encode(input),
            onSuccess: function(response){
                if(response.result=="true"||response.result==true) {info.innerHTML = "该邮箱未被注册，您可以使用！"; info.className = "tips";}
                else{info.innerHTML = response.message; info.className = "alert";}
            },
            onFailure: function(){
                info.innerHTML = "网络连接超时";
            }
        }).fire();
    }
    function nickExist(){
        var input = $("nickname").value; var info = $("nick_info"); info.className = "tips"; info.innerHTML = "检测用户昵称 ...";
        if (!$chk2(input)) { info.className = "alert"; info.innerHTML = "还未输入昵称"; return false; }
        new echoAjax({url: '/reg/utils/',params: "type=nickexist&value=" + String.encode(input),
            onSuccess: function(response){
                if (response.result == "true" || response.result == true) {
                    var count = parseInt(response.message);
                    if (count == 0) { info.innerHTML = "该昵称无人使用"; info.className = "hint"; }
                    else {
                        var count = parseInt(response.message); info.innerHTML = "该昵称已经有" + count + "人注册，确定要使用这个吗？";
                        info.className = "hint";
                    }
                }else { info.innerHTML = "出现错误，请稍候重试！"; info.className = "alert"; }
            },
            onFailure: function(){
                info.innerHTML = "出现错误，请稍候重试！"; info.className = "alert";
            }
        }).fire();
    }
    function register(){
		var username = $('username').value, pass = $('pass').value, nick = $('nickname').value;
		$('id_info').innerHTML = '';$('id_info').className = 'hint';
		$('pass_info').innerHTML = '';$('pass_info').className = 'hint';
		$('nick_info').innerHTML = '';$('nick_info').className = 'hint';
		$('lic_info').innerHTML = '';$('lic_info').className = 'hint';
		if(!$chk2(username)) { $('id_info').innerHTML = '未输入注册邮箱';$('id_info').className = 'alert'; return false; }
		if(!$chk2(pass)) { $('pass_info').innerHTML = '未输入密码';$('pass_info').className = 'alert'; return false; }
		if(!$chk2(nick)) { $('nick_info').innerHTML = '未输入昵称';$('nick_info').className = 'alert'; return false; }
		if(!$("chk_lic").checked) { $('lic_info').innerHTML = '未同意协议';$('lic_info').className = 'alert'; return false; }
        var password = MD5($("pass").value);
        var sub_btn = $("regbutton"); sub_btn.disabled = true;
        var params = String.format("username={0}&password={1}&nickname={2}", 
						String.encode(username), String.encode(password), String.encode(nick));
        new echoAjax({url:'/reg/', params: params,
            onSuccess: function(response){
                sub_btn.removeAttribute("disabled");
                if (response.result == "true" || response.result == true) window.location.href = "/reg_success/";
                else new MsgBox({message:response.message});
            },
            onFailure: function(){
            	sub_btn.removeAttribute("disabled");
                new MsgBox({message:"网络连接超时, 请再次提交"});
            }
        }).fire();
    }
</script>
{% endblock %}
